<template>
  <view class="pop-order-remark">
    <u-popup
      ref="order_remark_pop"
      bgColor="#ffffff"
      :show="show_pop"
      mode="bottom"
      :closeOnClickOverlay="true"
      round="30"
      @close="onClose"
      @open="onOpen">
      <view class="info-modal-wrap">
        <view class="info-modal-inner">
          <view class="modal-head flex-center">
            <view class="title-box">订单备注</view>
          </view>
          <view class="modal-ctx">
            <view class="area-box">
              <textarea
                v-model="content"
                maxlength="200"
                placeholder="选填，填写您的需求，付款后商家可见"
                placeholder-class="textarea-place" />
            </view>
          </view>
          <view class="modal-foot">
            <view class="footer-wrap">
              <view class="btns">
                <view class="btn flex-center" @click="doConfirm()">确定</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      show_pop: false,
      content: "",
    };
  },
  computed: {},
  watch: {},
  methods: {
    init(coupons) {
      this.show_pop = true;
    },
    onClose() {
      this.show_pop = false;
    },
    onOpen() {},
    doClose() {
      this.show_pop = false;
    },

    doConfirm() {
      if (!this.content) {
        this.$alert("请填写订单备注");
        return;
      }
      this.$emit("confirm", this.content);
      this.show_pop = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.pop-order-remark {
  position: relative;
  z-index: 1000;
}

.info-modal-wrap {
  width: 100%;
  position: relative;
  text-align: left;
  padding-bottom: 0;
  // padding-bottom: calc(64rpx + constant(safe-area-inset-bottom));
  // padding-bottom: calc(64rpx + env(safe-area-inset-bottom));

  .info-modal-inner {
    border-radius: 16rpx;
    overflow: hidden;
    width: 100%;
    padding: 0 0;
    padding-bottom: 0;
    min-height: 400rpx;
    background: #ffffff;
  }
}

.modal-head {
  padding: 24rpx 40rpx;
  // border: 1rpx solid #DDDDDD;
  padding-right: 0;

  .title-box {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 32rpx;
    color: #000000;
  }
}

.modal-ctx {
  width: 100%;
  background-color: #fff;
  padding: 24rpx 32rpx;
  min-height: 500rpx;
  padding-bottom: 30rpx;
}

.area-box {
  textarea {
    width: 100%;
    border-radius: 8rpx;
    background: #f8f8f8;
    padding: 16rpx 24rpx;
    font-size: 24rpx;
    color: #333333;
  }

  .textarea-place {
    font-size: 24rpx;
    color: #878998;
  }
}

.footer-wrap {
  box-shadow: 0rpx -8rpx 20rpx 2rpx rgba(0, 0, 0, 0.06);
  padding: 20rpx;

  .safe-fixed-bottom {
    position: relative;
  }

  .btns {
    .btn {
      flex: 1;
      width: 100%;
      height: 80rpx;
      background: #f49c0d;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #ffffff;
    }
  }
}
</style>
